//使用Vuex的单文件结构

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {

    // increment(context,value){
    //     context.commit("Increment",value)
    // },

    incrementOdd(context,value){ //奇数加 
        if(context.state.sum % 2) context.commit("Increment",value)
    },
    incrementWait(context,value){ //等等加
        setTimeout(() => {
            context.commit("Increment",value)
        }, 800);
    },
}
//准备mutations对象——修改state中的数据,方法名称大写用来区分 action中的方法
const mutations = { 
    Increment(state,value){ //加
        state.sum+=value
    },
    Decrement(state,value){ //减
        state.sum-=value
    },
    AddPerson(state,value){
        state.personList.unshift(value)
    },
}
//准备state对象——保存具体的数据
const state = {
         sum:0,
         personList:[{id:'001',name:'张三'}]
}

const getters={
    bigSum(state){
        return state.sum *10
    },
}

//创建并暴露store, 参数的key与value 名称相同，则只需要写一个就好
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})